<template>
	<view>
		<view class="banglist">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goBList(item.rank_id)">
				<view class="mask"></view>
				<p>
				{{item.title}} 
				</p>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			uni.request({
				url:'/dpc/v2/pweb/rank_type_list',
				success: (res) => {
					console.log(res)
					this.list = res.data.data.rank_types
				}
			})	
		},
		
		// ifdef APP-PLUS
		onLoad() {
			uni.request({
				url:'/dpc/v2/pweb/rank_type_list',
				success: (res) => {
					console.log(res)
					this.list = res.data.data.rank_types
				}
			})	
		},
		// endif
		methods: {
			goBList(id){
				uni.navigateTo({
					url:'../bangLists/bangLists?id=' + id
				})
			}
		}
	}
</script>

<style>
.banglist{
	
	padding: 2%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.banglist .item{
	width: 29%;
	height: 150rpx;
	/* background: url(https://tn1-f2.kkmh.com/image/210823/rP4D0G7Yf.webp-w750.jpg); */
	background-color: #6adea4;
	background-size: 100%;
	margin-bottom: 2%;
	font-size: 36rpx;
	font-weight: 700;
	color: #fff;
	text-align: center;
	line-height: 150rpx;
	position: relative;
}
.banglist .item:nth-child(2n){
	background-color: #f5f53ede;
	width: 29%;
}
.banglist .item:nth-child(3n){
	background-color: #ffaaff;
	width: 70%;
}
.banglist .item:nth-child(7){
	width: 70%;
}
.banglist .item:nth-child(12){
	background-color: #4feac3;
}
.banglist .item:nth-child(2){
	background-color: #aaaaff;
	width: 70%;
}
.banglist .item:nth-child(6){
	background-color: #ffaa7f;
	width: 70%;
}
.banglist .item:nth-child(5){
	background-color: #55aaff;
}
.banglist .item:nth-child(7){
	background-color: #aaffff;
}
.banglist .item:nth-child(8){
	background-color: #55aaff;
}
.banglist .item:nth-child(9){
	background-color: #ff557f;
}
.banglist .item:nth-child(13){
	background-color: #aaaaff;
	width: 100%;
}
.banglist .item .mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color:rgb(255 167 167 / 86%); */
}
.banglist .item p{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
}
</style>
